<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {showToast} from "vant";
import {getTeamInfo, updateTeam} from "@/api/team.ts";

const router = useRouter()
const route = useRoute()

// 获取旧数据
const addTeamData = ref()
onMounted(async () => {
  const res = await getTeamInfo(route.query.id as any)
  addTeamData.value = res.data.data
  addTeamData.value.status = String(addTeamData.value.status)
  addTeamData.value.expireTime = addTeamData.value.expireTime?.split('-')
})


// 选择日期
const minDate = new Date()
const maxDate = new Date(2025, 4, 1,)
const result = ref('');
const showPicker = ref(false);
const onConfirm = ( {selectedValues} ) => {
  result.value = selectedValues.join('-');
  showPicker.value = false;
};

// 提交
const onSubmit = async () => {
  if(Number(addTeamData.value.status)!==2){
    addTeamData.value.password = ''
  }
  const postData = {
    ...addTeamData.value,
    status: Number(addTeamData.value.status),
    expireTime: result.value,
    id: route.query.id,
  }
  console.log(postData,result.value)
  const res = await updateTeam(postData)
  console.log(res)
  if(res.data.code === 0 && res.data){
    await router.replace('/team')
    showToast('更新成功')
  }
}
</script>

<template>
  <div v-if="addTeamData">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="addTeamData.name"
            name="name"
            label="队伍名称"
            placeholder="队伍名称"
            :rules="[{ required: true, message: '请填写队伍名称' }]"
        />
        <van-field
            v-model="addTeamData.description"
            rows="4"
            autosize
            label="队伍介绍"
            type="textarea"
            placeholder="请介绍您的队伍"
        />
        <van-field
            is-link
            readonly
            name="datePicker"
            label="时间选择"
            :placeholder="addTeamData.expireTime?.length>0 ?  addTeamData.expireTime:'点击请选择过期日期'"
            @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-date-picker
              @confirm="onConfirm"
              @cancel="showPicker = false"
              v-model="addTeamData.expireTime"
              title="请选择过期日期"
              :min-date="minDate"
              :max-date="maxDate"
          />
        </van-popup>
        <van-field name="stepper" label="最大人数">
          <template #input>
            <van-stepper v-model="addTeamData.maxNum" min="3"/>
          </template>
        </van-field>
        <van-field name="radio" label="单选框">
          <template #input>
            <van-radio-group v-model="addTeamData.status" direction="horizontal">
              <van-radio name="0">公开</van-radio>
              <van-radio name="1">私有</van-radio>
              <van-radio name="2">加密</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
            v-if="Number(addTeamData.status) === 2"
            v-model="addTeamData.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          更新队伍
        </van-button>
      </div>
    </van-form>

  </div>
</template>

<style scoped>

</style>